<template>
	<view class="cu-bar tabbar bg-color1 bottom-nav">
		<view class="action" :class="showIndex == 1?'text-green':'text-gray'" @click="$common.toPage('../index/index',2)">
			<view class="cuIcon-homefill"></view> 
			{{$t('bottomNav.index')}}
		</view>
		
		<view class="action " :class="showIndex == 3?'text-green':'text-gray'" @tap="$common.toPage('../order/form',2)">
			<view class="cuIcon-similar"></view>
			{{$t('bottomNav.mining')}}
		</view>
		
		<view class="action " :class="showIndex == 2?'text-green':'text-gray'" @tap="$common.toPage('../wallet/wallet',2)">
			<view class="cuIcon-sponsorfill"></view>
			{{$t('bottomNav.wallet')}}
		</view>
		
		<view class="action " :class="showIndex == 4?'text-green':'text-gray'" @tap="$common.toPage('../home/home',2)">
			<view class="cuIcon-my"></view>
			{{$t('bottomNav.my')}}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'nav-bottom',
		props: ['showIndex'],
		data() {
			return {
				
			}
		},
		onShow() {},
		mounted: function() {},
		computed: {},
		methods: {}

	}
</script>

<style>
	.justify-between {
		text-align: center;
		font-size: 40upx;
	}
	.text-green{
		color: #7CECF8;
	}
	.bg-color1 {
	    background-color: white;
	}
</style>
